<template>
<div id="select">
    <div class="select">
        <div class="cityname">
        <!--<mu-icon value="chevron_left" :size="36" />-->
        </div>
        <div class="search" >
            <input type="text" v-model="seletval" @focus="showselectHository=true" >
            <mu-icon value="search" @click="selet" />
        </div>
        <div class="email" >
            <router-link :to="{path:'/'}">取消</router-link>
        </div>
    </div>

    <div class="slecondition">
        <span class="time" @click="dialog=true" v-text="seltime"></span>
        <span class="place"  @click="dialogcity=true" >
            {{address[0]}} - {{address[1]}}
        </span>
        <span class="price">
            价格排序↑<!-- {{showselectHository}} -->
        </span>
    </div>

    <mu-dialog :open="dialog" title="选择日期" scrollable>
        <div  id="datepk" style="width: 100%;"></div>
        <input type="type" name="t" id="t" value=""  class="auto-kal" style="width:200px;" />
        <mu-flat-button primary label="确定" @click="dialog=false" slot="actions"/>
    </mu-dialog>

    <mu-dialog :open="dialogcity" title="选择城市" scrollable>
        <mu-picker :slots="addressSlots" :visible-item-count="5" @change="addressChange" :values="address"/>
        <mu-flat-button primary label="确定" @click="dialogcity=false" slot="actions"/>
    </mu-dialog>

    <div class="historylist" v-show="selectHository.length>0&&showselectHository">
        <ul>
            <li v-for="(item,index) in selectHository">
                <span class="val textoverhide" @click="selHository(item)">
                  {{item}}
                </span>
                <span @click="remoHository(index)" class="inoc">
                  <mu-icon value="close" :size="20" />
                </span>
            </li>
        </ul>
        <div class="clerahository" @click="clerahository">
            清空历史记录
        </div>
    </div>
     <load :shedatalist="showdatalist"></load>
</div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex';
    import address from '../assets/js/city'
    import load from './common/homepageload' //引入懒加载的瀑布流组件
    export default {
        name: 'select', //组件的名字
        data() {
            return { //数据
                seletval: '',
                dialog: false,
                showselectHository: false,
                seltime: '时间选择',
                dialogcity: false,
                showdatalist: [],
                addressSlots: [{
                    width: '100%',
                    textAlign: 'right',
                    values: Object.keys(address)
                }, {
                    width: '100%',
                    textAlign: 'left',
                    values: ['北京']
                }],
                address: ['北京', '北京'],
                addressProvince: '北京',
                addressCity: '北京'
            }
        },
        methods: { //方法
            ...mapMutations(['clearselecthository', 'showprogressfun', 'hideprogressfun']),
            selet() {
                let s = this.seletval
                if (s == '') return;
                this.selectHository.push(s)
                this.showselectHository = false

                localStorage.setItem('selecthository', JSON.stringify(this.selectHository));
                this.getdatalist(s)
            },
            remoHository(i) {
                this.selectHository.splice(i, 1)
            },
            getdatalist(v) {
                var data = {
                    keywords: v,
                    "rows": 2,
                    "page": 1,
                    "startRowNum": 1,
                }
                this.showprogressfun()
                let vm = this
                $.hsf.ajaxPost('room/searchRooms', data, '', function(result) {

                    console.log(result);
                    if (result.code == 200) {
                        for (var i = 0; i < result.data.length; i++) {
                            result.data[i].thumbUrl = $.hsf.imgUrl + result.data[i].thumbUrl
                        }
                        vm.showdatalist = result.data
                        vm.hideprogressfun()
                    }

                })
            },
            selHository(v) {
                this.showselectHository = false

                this.getdatalist(v)
            },
            clerahository() {
                localStorage.removeItem('selecthository');
                this.clearselecthository()

            },
            addressChange(value, index) {
                switch (index) {
                    case 0:
                        this.addressProvince = value
                        const arr = address[value]
                        this.addressSlots[1].values = arr
                        this.addressCity = arr[0]
                        break
                    case 1:
                        this.addressCity = value
                        break
                }
                this.address = [this.addressProvince, this.addressCity]
            },
            initKalendae() {
                var vm = this
                new Kalendae(document.getElementById("datepk"), {

                    months: 4,
                    mode: 'range',
                    subscribe: {
                        'change': function(date) {
                            //                 	   console.log(date._i, this.getSelected());
                            t.value = this.getSelected();
                            vm.seltime = this.getSelected()
                                //  b.value=this.getSelectedAsDates()


                        }
                    }
                });
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['selectHository']),
        },
        mounted: function() { //组件加载完成
            this.initKalendae()
        },
        components: {
            'load': load, //加载 瀑布流
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件

        }
    }
</script>
<style scoped lang="scss">
    .select {
        display: flex;
        display: -webkit-flex;
        height: 48px;
        line-height: 48px;
        background: #333;
        opacity:0.8;
        z-index:1000;
        width:100%;
        top:0;
        left:0;
        position: fixed;
        .cityname {
            flex: 1;
            -webkit-flex: 1;
            text-align: center;
            color: #fff;
            line-height: 78px;
        }
        .search {
            flex: 5;
            -webkit-flex: 5;
            position: relative;
            input {
                height: 30px;
                line-height: 30px;
                width: 100%;
                border: 0;
                border-radius: 3px;
                text-indent: 1em;
            }
            .material-icons {
                position: absolute;
                right: 5%;
                top: 14px;
                color: #ccc;
                z-index: 111;
            }
        }
        .email {
            flex: 1;
            line-height: 48px;
            text-align: center;
            color: #fff;
            a {
                color: #fff;
            }
        }
    }
    
    .slecondition {
        display: flex;
        display: -webkit-flex;
        text-align: center;
        padding: 7px 0;
        color: #333;
        border-bottom: 1px solid #eee;
        span {
            flex: 1;
            -webkit-flex: 1;
            border-right: 1px solid #eee;
        }
    }
    
    .historylist {
        width: 100%;
        z-index: 2;
        .clerahository {
            text-align: center;
            height: 48px;
            line-height: 48px;
        }
        ul {
            li {
                padding: 0 20%;
                height: 48px;
                line-height: 48px;
                border-bottom: 1px solid #ccc;
                display: flex;
                display: -webkit-flex;
                span {}
                .inoc {
                    text-align: right;
                    line-height: 64px;
                    flex: 1;
                    -webkit-flex: 1;
                }
                .val {
                    overflow: hidden;
                    white-space: nowrap;
                    word-wrap: normal;
                    overflow: hidden;
                    -ms-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    flex: 3;
                    -webkit-flex: 3;
                }
            }
        }
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->